<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
</head>

<body>
<h1>用户登录</h1>
用户名：<input name="userName" type="text" id="userName"><br>
密码：<input name="password" type="password" id="password"><br>
<input type="button" value="登录" onclick="login()">

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
    function login() {
       $.ajax({
        type: "post",
        url: "/login/check",
        // 这里是拿数据，如果没有可以不写
        data:{
            // 通过 $("#") 来选中，如果是id用# ，如果是class 用 .
            // .val()  来拿数据
            //.val("") 进行赋值
            // 这里的userName：
            // 必须与你在 写方法的时候的 参数名称一致，否者取不到值
            userName: $("#userName").val(),
            password: $("#password").val()
        },
        success: function(body){
            if(body) {
              location.href = "index.html";}
            // 下面两种情况跟上面 一样的作用
            // location.assign = "index.html"
            // location.replace ="index.html"
            else{
            // 这里是弹出一个框
              alert("用户名或密码错误");}
        }
       });
    }

</script>
</body>

</html>